<template>
  <div class="echarts-outer-wrapper width-1250" v-if="EchartData != null">
    <Title
      title="业务协同"
      time="4"
      timePosition="left"
      dw="单位：万条"
    ></Title>
    <div class="all-data" v-if="allData">
      <div class="nian">
        <div>{{ allData.bnzsList[0].ssnd }}年</div>
        <div>{{ allData.tqzsList[0].ssnd }}年</div>
      </div>
      <div class="tigong">
        <div>提供 {{ allData.bnzsList[0].tgzs }} 万条</div>
        <div>提供 {{ allData.tqzsList[0].tgzs }} 万条</div>
      </div>
      <div class="huoqu">
        <div>获取 {{ allData.bnzsList[0].hqzs }} 万条</div>
        <div>获取 {{ allData.tqzsList[0].hqzs }} 万条</div>
      </div>
    </div>
    <div class="legend">
      <div class="legend-item" style="margin-right: 24px">
        <img src="@/assets/images/echart-legend-5.png" alt />
        提供
      </div>
      <div class="legend-item">
        <img src="@/assets/images/echart-legend-4.png" alt />
        获取
      </div>
    </div>
    <div class="unit">
      <div class="unit-left">万条</div>
      <div class="unit-right">万条</div>
    </div>
    <div ref="echarts" style="height: 360px">
      <echartCompt class="echarts-chart" v-model="chartOption" />
    </div>
  </div>
</template>
<script>
const FullYear = new Date().getFullYear();
import * as echartOption from "@/components/echart-axis";
import Title from "@/components/title";
import * as echarts from "echarts";

export default {
  name: "dygqywbll",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      EchartData: null, // 图表数据
      allData: "2022",
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  computed: {
    chartOption() {
      let _this = this;
      var xdata = [];
      let data1 = [];
      let data2 = [];
      if (this.EchartData) {
        this.EchartData.map((item) => {
          xdata.push(item.wbjmc);
          data1.push(item.tgts);
          data2.push(item.hqts);
        });
      }

      let textColor = "#fff";
      let lineColor = "rgba(255,255,255,0.2)";
      let colors = [
        {
          tagColor: "rgba(94, 215, 255, 1)",
          start: "rgba(94, 215, 255, 1)",
          end: "rgba(7, 49, 141, 0)",
        },
        {
          tagColor: "rgba(255, 253, 94, 1)",
          start: "rgba(7, 49, 141, 0)",
          end: "rgba(255, 253, 94, 1)",
        },
      ];

      let option = {
        baseOption: {
          timeline: {
            show: false,
            top: 0,
            data: [],
          },
          tooltip: echartOption.tooltip({
            formatter: function (params) {
              return [
                `<div style="color:${echartOption.tooltipTextColor}">${params[0].name}</div>`,
                `<div style="color:${
                  echartOption.tooltipTextColor
                }"><span style="display:inline-block;width:12px;height:12px;margin-right:6px;background-color:${
                  params[0].seriesName == "提供"
                    ? colors[0].tagColor
                    : colors[1].tagColor
                };border-radius:16px"></span>${params[0].seriesName}:${
                  params[0].value
                }</div>`,
              ].join("");
            },
          }),
          legend: {
            show: false,
          },
          dataZoom: echartOption.dataZoomRight([0, 1, 2], {
            endValue: 8,
            top: 0,
            bottom: 32,
            right: 42,
          }),
          grid: [
            // 左边
            {
              show: false,
              left: "15%",
              top: 0,
              bottom: 20,
              containLabel: true,
              width: "30%",
            },
            // 中间
            {
              show: false,
              left: "51%",
              top: 0,
              bottom: 20,
              width: "0%",
            },
            // 右边
            {
              show: false,
              right: "15%",
              top: 0,
              bottom: 20,
              containLabel: true,
              width: "30%",
            },
          ],
          xAxis: [
            {
              type: "value",
              inverse: true,
              splitNumber: 2,
              axisLine: echartOption.yAxisline,
              axisTick: {
                show: false,
              },
              position: "bottom",
              axisLabel: {
                show: false,
                color: textColor,
              },
              splitLine: echartOption.splitLine,
            },
            {
              gridIndex: 1,
              show: false,
            },
            {
              gridIndex: 2,
              splitNumber: 2,
              axisLine: echartOption.yAxisline,
              axisTick: {
                show: false,
              },
              position: "bottom",
              axisLabel: {
                show: false,
                color: textColor,
              },
              splitLine: echartOption.splitLine,
            },
          ],
          yAxis: [
            {
              type: "category",
              inverse: true,
              position: "right",
              axisLine: {
                show: true,
                lineStyle: {
                  color: lineColor,
                },
              },

              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              data: xdata,
            },
            {
              gridIndex: 1,
              type: "category",
              inverse: true,
              position: "left",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#ffffff",
                  fontSize: 12,
                },
                align: "center",
              },
              data: xdata.map(function (value) {
                if (value.length > 4) {
                  value = value.slice(0, 4) + "...";
                }
                return {
                  value: value,
                  textStyle: {
                    align: "center",
                  },
                };
              }),
            },
            {
              gridIndex: 2,
              type: "category",
              inverse: true,
              position: "left",
              axisLine: {
                show: true,
                lineStyle: {
                  color: lineColor,
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              data: xdata,
            },
          ],
          series: [],
        },
        options: [],
      };
      option.options.push({
        series: [
          {
            name: "提供",
            type: "bar",
            zlevel: 1,
            barWidth: 11,
            stack: "1",
            itemStyle: {
              normal: {
                color: new _this.echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: colors[0].start,
                  },
                  {
                    offset: 1,
                    color: colors[0].end,
                  },
                ]),
                barBorderRadius: 100,
              },
            },
            label: {
              normal: {
                show: true,
                position: "right",
                color: "#fff",
                fontSize: 12,
                offset: [-350, 0],
                aligh: "right",
              },
            },
            data: data1,
            animationEasing: "elasticOut",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(7, 49, 141, 1)",
              barBorderRadius: 6,
            },
          },
          {
            name: "获取",
            type: "bar",
            zlevel: 1,
            stack: "2",
            barWidth: 11,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                color: new _this.echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: colors[1].start,
                  },
                  {
                    offset: 1,
                    color: colors[1].end,
                  },
                ]),
                barBorderRadius: 100,
              },
            },
            label: {
              normal: {
                show: true,
                position: "left",
                color: "#fff",
                fontSize: 12,
                offset: [350, 0],
                aligh: "left",
              },
            },
            data: data2,
            animationEasing: "elasticOut",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(7, 49, 141, 1)",
              barBorderRadius: 6,
            },
          },
        ],
      });

      return option;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getData();
    },
    getData() {
      this.ajax({
        url: "/dpzsGzcxService/ywxtQuery",
        method: "post",
        data: {
          param: {
            tqnd: FullYear - 1,
            dqnd: FullYear,
          },
        },
      }).then((res) => {
        res = res.data;
        if (res.rtnCode !== "200") {
          this.$message.error(res.rtnMsg);
          return;
        }
        this.EchartData = res.data.ywxtList;
        this.allData = {
          tqzsList: res.data.tqzsList,
          bnzsList: res.data.bnzsList,
        };
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.echarts-outer-wrapper {
  width: 926px;
  height: 530px;
}
.all-data {
  position: absolute;
  top: 60px;
  left: 24px;
  background-color: rgb(34, 73, 189);
  border-radius: 8px;
  padding: 6px 16px;
  color: #ffffff;
  display: flex;
  line-height: 24px;
  font-size: 17px;
  .nian {
    color: #fbe671;
  }
  .tigong {
    margin: 0 12px;
  }
}
.legend {
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 76px;
  .legend-item {
    display: flex;
    color: #fff;
    font-size: 16px;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
  }
}
.unit {
  margin: auto;
  width: 776px;
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #b3d3e5;
  font-size: 14px;
}
.echarts-chart {
  height: 100%;
  width: 100%;
}
</style>
